<template>
    <div class="test-content">
        <div class="title">测试字典取值</div>
        <el-select
          @change="handleChange"
          v-model="dictId"
          placeholder="请选择字典 ID"
          style="width: 240px"
          clearable
        >
          <el-option v-for="item, index in list" :key="index" :label="item.label" :value="item.id"/>
        </el-select>

        <div class="api-url" v-if="apiUrl">
            <el-link type="primary" @click="handleOpen" style="margin-right: 15px;">打开</el-link>
            <el-link type="primary">{{ apiUrl }}</el-link>
            <div style="margin-left: 15px;" v-if="apiRes">测试结果：{{ apiRes }}</div>
        </div>
    </div>
</template>

<script setup>
import DictAPI from '@/api/system/dict.api'
const dictId = ref(null)

const paging = ref({
  size: 20,
  page: 1,
  total: 0,
})

const typeCodes = ref(null)

watch(typeCodes, () => {
    dictId.value = null
    apiRes.value = null
    apiUrl.value = null
})

const init = (code) => {
    typeCodes.value = code
    getList()
}

const list = ref([])
const getList = () => {
  DictAPI.getDataList({
    page: paging.value.page,
    size: paging.value.size,
    typeCodes: typeCodes.value,
  }).then((res) => {
    paging.value.total = res.count
    list.value = res.rows
  })
}

const apiUrl = ref(null)
const handleChange = (val) => {
    if(!val) {
        apiRes.value = null
        apiUrl.value = null
        return
    }
    apiUrl.value = import.meta.env.VITE_APP_API_URL + '/dict/value/' + val
}

const apiRes = ref(null)
const handleOpen = () => {
    DictAPI.testDict(dictId.value).then(res => {
        apiRes.value = JSON.stringify(res)
    })
}

defineExpose({
  init,
})
</script>

<style>
.test-content{
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc90;
}

.title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.api-url{
    min-width: 300px;
    padding: 10px;
    border-radius: 8px;
    background-color: #cccccc30;
    display: flex;
    align-items: center;
    margin-top: 16px;
}
</style>
